<!--
 *@description:
 *@author: Ming
 *@date: 2021-05-29 22:40:01
 *@version: V1.0.5
-->
<template>
  <div :class="['tabs-item',{ active,disabled }]" @click="selected">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name:'LmtabsItem',
  props: {
      disabled:{
          type:Boolean,
          default:false
      },
      name:{
        type:[String,Number],
        required:true
      }
  },
  data() {
    return {
      active:false
    };
  },
  inject:['eventBus'],
  created() {
    this.eventBus.$on('update:selected',name=>{
      this.active = name===this.name
    })
  },
  methods: {
    selected(){
      if(this.disabled) return
      this.eventBus.$emit('update:selected',this.name,this)
    }
  },
};
</script>

<style lang="scss" scoped>
.tabs-item{
  padding: 0 2em;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  user-select: none;
  cursor: pointer;
  &.active{
    color: #409eff;
    .g-icon{
      fill: #409eff;
    }
    &.disabled{
      color: gray;
    }
  }
  &.disabled{
    color: gray;
    cursor: not-allowed;
    .g-icon{
        fill: gray;
      }
  }
  &:hover{
    color: #409eff;
    .g-icon{
      fill: #409eff;
    }
    &.disabled{
      color: gray;
      .g-icon{
        fill: gray;
      }
    }
  }
}
</style>
